<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>练习</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <School></School>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    // 定义组件
    const School = Vue.extend({
        template: `
				<div>
					<h2>学校名：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
					<h2>班主任：{{teacher}}</h2>
					<button @click="showCheng">点我提示班主任名</button>	
				</div>
			`,
        data() {
            return {
                name: '清华大学',
                address: '五道口',
                teacher: '张牛马'
            }
        },
        methods: {
            showCheng() {
                alert(this.teacher)
            }
        },

    })
    // 注册组件
    
    new Vue({
        el:'#root',
        components:{
            School
        }
    })
</script>

</html>